<template>
    <!-- 列表页面 -->
    <div class="tableSample">
        <div class="header">
            <div class="header-left">
                <p class="title">门店订单列表
                    <el-button type="primary" plain style="margin-left: 30px;" @click="exportToExcel" :loading="excelLoad">导出信息</el-button>
                </p>
            </div>
            <div class="header-right">
                <el-dropdown  size="medium" style="margin-right: 10px;" @command="handleCommandOne" v-auth="'查询'" v-if="linUserId === 1">
                    <el-button  size="medium">
                        {{storeStatus ? storeStatus : '门店列表'}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="['门店列表']">门店列表</el-dropdown-item>
                        <el-dropdown-item
                                v-for="store in storeArr"
                                :key="store.id"
                                :command="[store]">{{store.username}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <lin-search @query="onQueryChangeThree" placeholder="请输入会员卡号"/>
                <lin-search @query="onQueryChange" placeholder="请输入姓名" style="margin-left: 10px;"/>
                <lin-search @query="onQueryChangeOne" placeholder="请输入电话" style="margin-left: 10px;"/>
                <lin-search @query="onQueryChangeTwo" placeholder="请输入地址" style="margin-left: 10px;"/>
                <el-dropdown  size="medium" style="margin: 0 10px;" @command="handleCommand" v-auth="'查询'">
                    <el-button  size="medium">
                        {{searchStatus ? searchStatus : '订单状态'}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="['订单状态']">订单状态</el-dropdown-item>
                        <el-dropdown-item
                                v-for="status in statusArr"
                                :key="status.id"
                                :command="[status]">{{status.name}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <lin-date-picker @dateChange="handleDateChange" ref="searchDate" class="date" style="margin-right: 10px;">
                </lin-date-picker>
            </div>
        </div>
        <!-- 表格 :default-expand-all="true"-->
        <el-table
                :data="tableData"
                stripe
                border
                v-loading="loading"
        >
            <!-- 展示摘要 -->
            <el-table-column type="expand" >
                <template slot-scope="props">
                    <el-table
                            :data="props.row.content"
                            stripe
                            border
                            v-loading="loading"
                    >
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="name"
                                label="名称">
                        </el-table-column>
                        <el-table-column
                                :show-overflow-tooltip="true"
                                prop="number"
                                label="数量">
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="order_no"
                    label="订单号">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="user.user_no"
                    label="会员卡号">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="user_grade_name"
                    label="会员等级">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="mobile"
                    label="电话">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="pick_deliver_staff_name"
                    label="取送员">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="pick_deliver_staff_phone"
                    label="取送员电话">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="status_name"
                    label="订单状态">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="payment_name"
                    label="支付方式">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="price"
                    label="订单价格">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="coupon_price"
                    label="优惠金额">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="create_time"
                    label="下单时间">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="pay_time"
                    label="支付时间">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="store_name"
                    label="所属门店">
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column label="操作" fixed="right" width="130">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click.native.prevent.stop="handleDelete(scope.row)"
                            v-if="scope.row.status === 1"
                    >删除订单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination" v-if="total_nums > 0">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :background="true"
                    :page-size="pageCount"
                    :current-page="currentPage"
                    v-if="refreshPagination"
                    layout="total,prev, pager, next, jumper"
                    :total="total_nums"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import order from '@/models/order'
import admin from '@/models/admin'
import LinSearch from '@/components/base/search/lin-search'
import LinDatePicker from '@/components/base/date-picker/lin-date-picker'
import User from '@/lin/models/user'

export default {
  components: {
    LinSearch,
    LinDatePicker,
  },
  data() {
    return {
      tableData: [],
      operate: [],
      loading: false,
      excelLoad: false,
      linUserId: 1,
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 30, // 每页10条数据
      total_nums: 0, // 分组内的总数
      search: {
        user_no: '',
        name: '',
        mobile: '',
        address: '',
        status: '',
        start_date: '',
        end_date: '',
        lin_user_id: '',
      },
      statusArr: [
        { id: 1, name: '待取送员抢单' },
        { id: 2, name: '待上门取衣' },
        { id: 3, name: '待支付' },
        { id: 4, name: '待用户预约配送' },
        { id: 5, name: '正在配送' },
        { id: 6, name: '已完成' },
      ],
      searchStatus: '',
      searchDate: ['', ''],
      storeStatus: '',
      storeArr: [],
    }
  },
  computed: {},
  created() {
    this.loading = true
    this.getAdminUser()
    this.getAdminAll()
    // 获取数据
  },
  watch: {
    // 日期搜索
    searchDate(newDate) {
      if (newDate && newDate.length) {
        this.searchDate = newDate
      } else {
        this.searchDate = ['', '']
      }
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
  },
  methods: {
    handleDelete(val) {
      this
        .$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          this.loading = true
          const res = await order.deleteStoreOrder(val.id)
          if (res.error_code === 0) {
            this.$message.success(`${res.msg}`)
          }
          this._getTableData(this.currentPage, this.pageCount)
        })
    },
    async getAdminAll() {
      const res = await admin.getAdminAll()
      this.storeArr = res
    },
    async getAdminUser() {
      const res = await User.getInformation()
      this.linUserId = res.linUserId
      this.search.lin_user_id = res.linUserId
      this._getTableData(this.currentPage, this.pageCount)
    },
    async exportToExcel() {
      const self = this
      self.excelLoad = true
      const res = await order.getStoreExcelList({
        user_no: this.search.user_no,
        name: this.search.name,
        mobile: this.search.mobile,
        address: this.search.address,
        status: this.search.status,
        start_date: this.searchDate[0],
        end_date: this.searchDate[1],
        lin_user_id: this.search.lin_user_id,
      })
      if (res.length === 0) {
        self.excelLoad = false
        return false
      }
      const list = []
      res.forEach((item) => {
        list.push({
          order_no: item.order_no,
          user_no: item.user.user_no,
          user_grade_name: item.user_grade_name,
          name: item.name,
          mobile: item.mobile,
          address: item.address,
          pick_deliver_staff_name: item.pick_deliver_staff_name,
          pick_deliver_staff_phone: item.pick_deliver_staff_phone,
          status_name: item.status_name,
          payment_name: item.payment_name,
          price: Number(item.price),
          coupon_price: item.coupon_price,
          create_time: item.create_time,
          pay_time: item.pay_time,
          store_name: item.store_name,
          clean_name: '',
          number: '',
        })
        item.content.forEach((items) => {
          list.push({
            order_no: '',
            user_no: '',
            user_grade_name: '',
            name: '',
            mobile: '',
            address: '',
            pick_deliver_staff_name: '',
            pick_deliver_staff_phone: '',
            status_name: '',
            payment_name: '',
            price: '',
            coupon_price: '',
            create_time: '',
            pay_time: '',
            store_name: '',
            clean_name: items.name,
            number: items.number,
          })
        })
      })
      require.ensure([], () => {
        const {
          export_json_to_excel,
          // eslint-disable-next-line global-require
        } = require('../excel/Export2Excel')
        const tHeader = [
          '订单号',
          '会员卡号',
          '会员等级',
          '姓名',
          '电话',
          '地址',
          '取送员',
          '取送员电话',
          '订单状态',
          '支付方式',
          '订单金额',
          '优惠金额',
          '创建时间',
          '支付时间',
          '门店名称',
          '清点衣物名称',
          '清点衣服数量',
        ]
        const filterVal = [
          'order_no',
          'user_no',
          'user_grade_name',
          'name',
          'mobile',
          'address',
          'pick_deliver_staff_name',
          'pick_deliver_staff_phone',
          'status_name',
          'payment_name',
          'price',
          'coupon_price',
          'create_time',
          'pay_time',
          'store_name',
          'clean_name',
          'number',
        ]
        const data = self.formatJson(filterVal, list)
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1// js中是从0开始所以要加1
        const day = date.getDate()
        export_json_to_excel(tHeader, data, `洗衣订单${year}${month}${day}`)
      })
      self.excelLoad = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 获取数据
    async _getTableData(start, count) {
      const res = await order.getStoreList(start, count, {
        user_no: this.search.user_no,
        name: this.search.name,
        mobile: this.search.mobile,
        address: this.search.address,
        status: this.search.status,
        start_date: this.searchDate[0],
        end_date: this.searchDate[1],
        lin_user_id: this.search.lin_user_id,
      })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
    rowClick(val) {
      console.log(val)
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    handleEdit(val) {
      this
        .$confirm('此操作将进行发货操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          this.loading = true
          const res = await order.updateGoodsOrder({ order_id: val.id })
          if (res.error_code === 0) {
            this.$message.success(`${res.msg}`)
          }
          this._getTableData(this.currentPage, this.pageCount)
        })
    },
    // 搜索会员卡号
    onQueryChangeThree(query) {
      this.loading = true
      this.search.user_no = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索姓名
    onQueryChange(query) {
      this.loading = true
      this.search.name = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.currentPage = 1
      this.pageCount = 10
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索电话
    onQueryChangeOne(query) {
      this.loading = true
      this.search.mobile = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索电话
    onQueryChangeTwo(query) {
      this.loading = true
      this.search.address = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索状态
    handleCommand(status) {
      this.searchStatus = status[0]['name'] // eslint-disable-line
      this.currentPage = 1
      this.loading = true
      // eslint-disable-next-line eqeqeq
      if (status[0] != '订单状态') {
        this.search.status = status[0].id
      } else {
        this.search.status = ''
      }
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索状态
    handleCommandOne(store) {
      this.storeStatus = store[0]['username'] // eslint-disable-line
      this.currentPage = 1
      this.loading = true
      // eslint-disable-next-line eqeqeq
      if (store[0] != '门店列表') {
        this.search.lin_user_id = store[0].id
      } else {
        this.search.lin_user_id = ''
      }
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 日期搜索
    handleDateChange(date) {
      this.searchDate = date
      this.currentPage = 1
      this.loading = true
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
  },
}
</script>

<style lang="scss" scoped>
    .tableSample {
        padding: 0 0 30px;

        .header {
            display: flex;
            width: 100%;
            overflow-x:scroll;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            border-bottom: 1px solid #dae1ed;

            .header-left {
                float: left;
                min-width: 270px;
                .title {
                    height: 59px;
                    line-height: 59px;
                    color: $parent-title-color;
                    font-size: 16px;
                    font-weight: 500;
                }
            }

            .header-right {
                float: right;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 30px;
            }
        }

        .table-main {
            padding: 0 30px;
            margin-top: 30px;
        }

        .top-operate {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            margin-top: 30px;
        }

        .sort-input {
            width: 50px;
            background: none;
            justify-content: space-around;
        }

        .table-edit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .content {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .cell-icon {
                cursor: pointer;
                color: #3963bc;
                font-size: 16px;
            }

            .cell-icon-edit {
                display: flex;
                margin-left: 20px;
                width: 50px;
                justify-content: space-between;

                .cell-cancel {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                }

                .cell-save {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                    margin-right: -20px;
                }
            }
        }

        .m-20 {
            margin-bottom: 10px;
            margin-top: 5px;
        }

        .summary {
            display: flex;
            justify-content: flex-start;
            flex-direction: row;

            img {
                width: 135px;
                height: 200px;
            }

            .demo-table-expand {
                font-size: 0;
                margin-left: 30px;
                display: flex;
                flex-direction: column;

                label {
                    width: 90px;
                    color: #99a9bf;
                }

                .el-form-item {
                    margin-right: 0;
                    margin-bottom: 0;
                    display: flex;
                    flex-direction: row;
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: flex-end;
            margin: 20px;
        }
    }
    // dialog
    .tableSample /deep/ .el-dialog__footer {
        text-align: left;
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__header {
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__body {
        padding: 30px;
    }
</style>
